<div id="header" th:replace="common/top"/>
<script src="/js/jquery-3.3.1.js"></script>
<script src="js/productView.js"></script>
<script src="/js/include.js"></script>
<div id="Welcome">
  <div id="WelcomeContent" th:text="${loginAccount != null ? loginAccount.firstName : ''}" />
</div>
<div id="Main">
  <div id="Sidebar">
    <div id="SidebarContent">
      <a href="categoryView?categoryId=FISH"><img src="/images/fish_icon.gif" >
      </a>
      <br />
      Saltwater, Freshwater
      <br />
      <a href="categoryView?categoryId=DOGS"><img src="/images/dogs_icon.gif" >
      </a>
      <br />
      Various Breeds
      <br />
      <a href="categoryView?categoryId=CATS"> <img src="/images/cats_icon.gif" /></a>
      <br />
      Various Breeds<br>Exotic Varieties
      <br />
      <a href="categoryView?categoryId=REPTILES"><img src="/images/reptiles_icon.gif" /></a>
      <br />
      Lizards, Turtles, Snakes
      <br />
      <a onclick="View1(5)" href="categoryView?categoryId=BIRDS"> <img src="/images/birds_icon.gif" /></a>
      <br />
      Exotic Varieties
    </div>
  </div>
  <div id="MainImage">
    <div id="MainImageContent">
      <map name="estoremap">
        <area class="main" alt="Birds" coords="72,2,280,250"
              href="categoryView?categoryId=BIRDS" shape="RECT" data-itemId="BIRDS" data-pos="1"/>
        <area class="main" alt="Fish" coords="2,180,72,250"
              href="categoryView?categoryId=FISH" shape="RECT" data-itemId="FISH" data-pos="2"/>
        <area class="main" alt="Dogs" coords="60,250,130,320"
              href="categoryView?categoryId=DOGS" shape="RECT" data-itemId="DOGS" data-pos="3"/>
        <area class="main" alt="Reptiles" coords="140,270,210,340"
              href="categoryView?categoryId=REPTILES" shape="RECT" data-itemId="REPTILES" data-pos="4"/>
        <area class="main" alt="Cats" coords="225,240,295,310"
              href="categoryView?categoryId=CATS" shape="RECT" data-itemId="CATS" data-pos="5"/>
        <area class="main" alt="Birds" coords="280,180,350,250"
              href="categoryView?categoryId=BIRDS" shape="RECT" data-itemId="BIRDS" data-pos="6"/>
      </map>
      <img height="355" src="/images/splash.gif" align="middle"
           usemap="#estoremap" width="350" />
    </div>
    <div class="tip" id="ToolTip">
      <ul id="TipList">

      </ul>
    </div>
  </div>
  <div id="ad">
    <!-- 海报 -->
    <div id="post">
      <img src="/images/ad_img.jpg" id="enter_ad"/>
    </div>
    <!-- 关闭键 -->
    <div id="close">
      <img id="close_img" src="/images/ad_close.jpg" width="15px" height="15px" />
    </div>
  </div>

  <div id="max">
    <div class="re">
      <ul>
        <li><img src="/images/rolling1.gif" id="dog"></li>
        <li><img src="/images/rolling2.jpg" id="cat"></li>
        <li><img src="/images/rolling3.jpg" alt=""></li>
        <li><img src="/images/rolling4.jpg" alt=""></li>
        <li><img src="/images/rolling5.jpg" alt=""></li>
      </ul>
      <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>

  <script type="text/javascript" src="/js/jpetstore.js"></script>
</div>

<div id="footer" th:replace="common/bottom"/>
